<template>
	<view class="app_Cont">
		<scroll-view class="showCont"  :refresher-triggered="refreshing" @refresherrefresh="refreshFn" :refresher-enabled="true" scroll-y="true" @scroll="scroll" :scroll-top="scrollTop" @scrolltolower="scrolltolower" lower-threshold="10" v-if="showCont">
			<view class="bannerCont">
				 <u-swiper
					:list="bannerArr"
					indicator
					height="320"
					indicatorMode="line"
					circular
				></u-swiper>
				<view class="headTop">
					<image class="headFamily" src="/static/img/family.png" ></image>
					<view class="headDes">您最贴心的求职帮手</view>
				</view>
			</view>
			<view class="mainCont">
				<view class="noticeCont">
					<u-notice-bar direction="column" fontSize="24rpx" color="#3f55cc" bgColor="#f8f8f8" :text="noticeArr"></u-notice-bar>
					<view class="moreNotice" @click="moreFn">更多</view>
				</view>
				<view class="serchNav">
					<view class="serchLeft">
						<view class="shuTag"></view>
						<view class="serchLeftText">精选推荐</view>
					</view>
					<view class="serchRight">
						<view class="serchItem" @click="showPosition = true">
							<view>{{position_name}}</view>
							<view class="iconfont icon-zhijiao-triangle"></view>
						</view>
						<view class="serchItem" @click="showCblx = true">
							<view>{{watercraft_type}}</view>
							<view class="iconfont icon-zhijiao-triangle"></view>
						</view>
						<view class="serchItem" @click="showHxyq = true">
							<view>{{watercraft_area}}</view>
							<view class="iconfont icon-zhijiao-triangle"></view>
						</view>
					</view>
				</view>
				<view class="workCont">
					<view class="workItem" @click="detailFn(item)" :key="index" v-for="(item,index) in listArr">
						<view class="workHead">
							<view class="workNameInfo">
								<view class="workName" v-if="item.watercraft_area">{{item.watercraft_area}}</view>
								<view class="headShu" v-if="item.watercraft_area"></view>
								<view class="workName">{{item.position_name}}</view>
								<view class="workTag" v-if="item.position_type==2">急聘</view>
							</view>
							<view class="workMoney">
								<text v-if="item.start_monry=='0'">面议</text>
								<text v-else>{{item.start_monry}}~{{item.end_monry}}{{item.unit==1?'元':'美元'}}</text>
							</view>
						</view>
						<view class="workInfo">
							<view class="workDes">
								<view class="workDesItem" v-if="item.watercraft_num">{{item.watercraft_num}}{{item.watercraft_dw}}</view>
								<view class="workDesItem">{{item.watercraft_type}}</view>
							</view>
						</view>
						<view class="workTags">
							<view class="tagItem" v-if="item.zsdj">{{item.zsdj}}</view>
							<view class="tagItem" v-if="item.gzjy">{{item.gzjy}}</view>
							<view class="tagItem" v-if="item.xlyq">{{item.xlyq}}</view>
							<view class="tagItem" v-if="item.nlyq">{{item.nlyq}}</view>
							<view class="tagItem" v-if="item.gwfl" :key="index2" v-for="(item2,index2) in item.gwfl.split(',')">{{item2}}</view>
						</view>
						<view class="workCom">
							<view class="comLeft">
								<view class="comImg">
									<image :src="item.enterprise_logo" /></image>
								</view>
								<view class="comInfo">
									<view class="comInfoTop">
										{{item.enterprise_name}}
									</view>
									<view class="comInfoUnder" v-if="item.hygk">
										<view class="comNameText">招聘港口：{{item.hygk}}</view>
									</view>
								</view>
							</view>
							<view class="workTime">{{item.update_time}}更新</view>
						</view>
					</view>
					<noData v-if="listArr.length==0&&!isChange"></noData>
					<loadMore v-if="!isChange&&last_page==page"></loadMore>
				</view>
			</view>
			
		</scroll-view>
		<tabBar></tabBar>
		<view v-if="showCont" class="totop iconfont icon-icon-test1" @click="totopFn"></view>
		<u-picker :show="showPosition" @confirm="positionSureFn" @cancel="showPosition = false" @close="showPosition = false" :closeOnClickOverlay="true" :columns="positionArr"></u-picker>
		<u-picker :show="showCblx" @confirm="cblxSureFn" @cancel="showCblx = false" @close="showCblx = false" :closeOnClickOverlay="true" :columns="cblxArr"></u-picker>
		<u-picker :show="showHxyq" @confirm="hxyqSureFn" @cancel="showHxyq = false" @close="showHxyq = false" :closeOnClickOverlay="true" :columns="hxyqArr"></u-picker>
		<load v-if="!showCont||isChange"></load>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar.vue'
	import load from '@/components/load.vue'
	import api from '@/http/api.js'
	import noData from '@/components/noData.vue'
	import loadMore from '@/components/loadMore.vue'
	import getCate from '@/utils/getCate.js'
	export default {
		components:{tabBar,load,noData,loadMore},
		data() {
			return {
				refreshing:false,//是否正在执行下拉
				showPosition:false,
				showHxyq:false,
				showCblx:false,
				showCont:false,
				isChange:false,
				title: 'Hello',
				text1:'’qynamde多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，',
				position_name:'岗位不限',
				watercraft_type:'类型不限',
				watercraft_area:'航线不限',
				page:1,
				per_page:10,
				token:'',
				listArr:[],
				positionArr:[],
				cblxArr:[],
				hxyqArr:[],
				last_page:0,
				IndexInfo:{},
				bannerArr:[],
				noticeArr:[],
				scrollTop:0,
				old: {
					scrollTop: 0
				},
				bindId:'',
				share:{
				   title: '鲸领航系统分享',
				   imageUrl:'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
				}
			}
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		onShareTimeline(res) {//分享到朋友圈
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		methods: {
			refreshFn(){
				this.refreshing = true
				this.serchFn()
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			totopFn(){
			
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			moreFn(){
				uni.navigateTo({
					url: 'notice/notice'
				});
			},
			scrolltolower(){
				if(this.page<this.last_page){
					this.page++
					this.isChange = true
					this.getData()
				}
			},
			serchFn(){
				this.page =1
				this.listArr = []
				this.isChange = true
				this.getData()
			},
			positionSureFn(data){
				this.position_name  = data.value[0]
				this.showPosition = false
				this.serchFn()
			},
			cblxSureFn(data){
				this.watercraft_type  = data.value[0]
				this.showCblx = false
				this.serchFn()
			},
			hxyqSureFn(data){
				this.watercraft_area  = data.value[0]
				this.showHxyq = false
				this.serchFn()
			},
			detailFn(item){
				uni.navigateTo({
					url: 'workDetail/workDetail?id='+item.enterprise_position_id
				});
			},
			getData(){
				let data = {
					page:this.page,
					per_page:this.per_page,
					position_name:this.position_name!='岗位不限'?this.position_name:'',
					watercraft_type:this.watercraft_type!='类型不限'?this.watercraft_type:'',
					watercraft_area:this.watercraft_area!='航线不限'?this.watercraft_area:'',
				}
				api.getRequst(data,'/api').then((res)=>{
					if(res.code==1){
						let arr = res.data.data
						for(let item of arr){
							this.listArr.push(item)
						}
						this.last_page = res.data.last_page
					}else if(res.code==2){
						this.authFn()
					}
					this.showCont = true
					this.isChange = false
					this.refreshing = false
				})
			},
			getIndexInfo(){
				
				let data = {}
				api.getRequst(data,'/api/index/bannerAndArt').then((res)=>{
					if(res.code==1){
						this.IndexInfo = res.data
						this.bannerArr = res.data.banner.map((item)=>{
							return item.banner_img
						})
						this.noticeArr = res.data.art.map((item)=>{
							return item.article_title
						})
						if(this.bindId){
							this.bindFn()
						}
						this.getData()
					}
				})
			},
			bindFn(){
				let data = {
					user_id:this.bindId,
				}
				api.getRequst(data,'/api/Index/shareBind').then((res)=>{
					
				})
			},
		},
		async onLoad(option) {
			this.bindId = option.scene||''
			let _positionArr = await getCate.getCateFn(3)
			this.positionArr = [['岗位不限'].concat(_positionArr.map((item)=>item.name))]
			let _cblxArr = await getCate.getCateFn(1)
			this.cblxArr = [['类型不限'].concat(_cblxArr.map((item)=>item.name))]
			let _hxyqArr = await getCate.getCateFn(2)
			this.hxyqArr = [['航线不限'].concat(_hxyqArr.map((item)=>item.name))]
			this.getIndexInfo()
		}
	}
</script>

<style lang="scss">
	.showCont{
		height: 100vh;
		overflow-y: auto;
		box-sizing: border-box;
	}
	.bannerCont{
		text-align: center;
		width: 100%;
		position: relative;
		image{
			height: 300rpx;
		}
		.headTop{
			width: 100%;
			height: 60rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			padding-left: 3%;
			position: absolute;
			left: 0;
			top: 90rpx;
			color: #fff;
			.headFamily{
				width: 150rpx;
				height: 60rpx;
			}
		}
	}
	.mainCont{
		background-color: #f8f8f8;
		padding: 30rpx 4% 140rpx;
		box-sizing: border-box;
		margin-top: -60rpx;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		.noticeCont{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.moreNotice{
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #3f55cc;
			}
		}
		.serchNav{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			.serchLeft{
				display: flex;
				position: relative;
				font-size: 30rpx;
				.serchLeftText{
					position: relative;
					z-index: 2;
					font-weight: bold;
				}
				.shuTag{
					height: 10rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					width: 120rpx;
					background-image: linear-gradient(to right,white,#3f55cc);
				}
			}
			.serchRight{
				display: flex;
				align-items: center;
				.serchItem{
					margin-left: 30rpx;
					display: flex;
					align-items: center;
					color: #666;
					border-radius: 5rpx;
					.iconfont{
						font-size: 20rpx;
						position: relative;
						top: 6rpx;
						left: -4rpx;
					}
				}
			}
		}
		.workCont{
			width: 100%;
			padding-top: 10rpx;
			.workItem{
				background-color: #fff;
				padding: 30rpx 4% 20rpx;
				margin-top: 30rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				.workHead{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.workNameInfo{
						display: flex;
						align-items: center;
						.workName{
							font-size: 32rpx;
							font-weight: bold;
						}
						.headShu{
							width: 4rpx;
							border-radius: 4rpx;
							background-color: #333;
							height: 24rpx;
							margin: 0 15rpx;
						}
						.workTag{
							padding: 5rpx 20rpx;
							font-size: 24rpx;
							// border: 1px solid #f56c6c;
							// background-color: ;
							background-image: linear-gradient(to right, #f56c6c,#ebc0b4);
							color: #fff;
							// margin-left: 10rpx;
							border-radius: 20rpx 0 20rpx 0;
							transform: scale(0.85);
						}
					}
					.workMoney{
						color: #3f55cc;
						font-size: 30rpx;
					}
				}
				.workTags{
					display: flex;
					// margin: 10rpx 0;
					flex-wrap: wrap;
					.tagItem{
						margin-top: 15rpx;
						padding: 5rpx 20rpx;
						background-color:#dae3fb;
						color: #3f55cc;
						font-size: 26rpx;
						border-radius: 0rpx 25rpx 0rpx 0rpx;
						margin-right: 20rpx;
					}
				}
				.workInfo{
					width: 100%;
					margin-bottom: 0rpx;
					.workDes{
						width: 100%;
						display: flex;
						align-items: center;
						margin: 10rpx 0;
						.workDesItem{
							font-size: 26rpx;
							color: #666;
							margin-right: 20rpx;
						}
					}
				}
				.workCom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 1px dashed #ddd;
					margin-top: 30rpx;
					padding-top: 30rpx;
					.comLeft{
						display: flex;
						align-items: center;
						.comImg{
							width: 60rpx;
							height: 60rpx;
							overflow: hidden;
							font-size: 0;
							border-radius: 50%;
							margin-right: 20rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.comInfo{
							.comInfoUnder{
								color: #666;
								margin-top: 6rpx;
								font-size: 24rpx;
								display: flex;
								align-items: center;
								.comYuan{
									margin: 0 10rpx;
								}
							}
							
						}
					}
					.workTime{
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.totop{
		position: fixed;
		right: 4%;
		background-color:rgba(63, 85, 204,0.3);
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 80rpx;
		bottom: 120rpx;
		font-size: 50rpx;
		color: #fff;
	}
</style>
